<!--
 * @Author: 徐建辰
 * @Date: 2022-05-27 22:06:07
 * @LastEditTime: 2022-05-27 22:08:25
 * @LastEditors: 徐建辰
 * @Description: 二维码示例
-->
<template>
  <ComWrapper>
		<el-row :gutter="15">
			<el-col :lg="8">
				<el-card shadow="never" header="常用">
					<QRcode text="commonly" />
				</el-card>
			</el-col>
			<el-col :lg="8">
				<el-card shadow="never" header="带Logo">
					<QRcode text="logo" :logo="logo" />
				</el-card>
			</el-col>
			<el-col :lg="8">
				<el-card shadow="never" header="自定义颜色大小">
					<QRcode text="custom color" :size="100" colorDark="#088200" colorLight="#fff" />
				</el-card>
			</el-col>
			<el-col :lg="8">
				<el-card shadow="never" header="动态">
					<QRcode :text="qrcode" />
					<el-input v-model="qrcode" placeholder="请输入"  style="margin-top: 20px;"/>
				</el-card>
			</el-col>
		</el-row>
	</ComWrapper>
</template>

<script setup>
import {defineAsyncComponent, ref} from 'vue'
import logo from '@/assets/img/logo.png'

const QRcode = defineAsyncComponent(() => import('@/components/Qrcode'))

const qrcode = ref('custom')
</script>